<template>
  <div>
    <el-dialog
      v-loading.lock="loading"
      class="base-dialog"
      :custom-class="'panna-dialog_medium'"
      title="任务分配"
      align="center"
      :visible.sync="innerDialogFormVisible"
      @closed="closeDialog"
    >
      <el-form ref="formData" :model="formData" status-icon :rules="formRules">
        <el-form-item
          label="检测人"
          :label-width="formLabelWidth"
          prop="detectionPeopleLabelList"
        >
          <el-input
            v-model="formData.detectionPeopleLabelList"
            disabled
          ></el-input>
          <div class="selectProductStandard" @click="selectUser">+</div>
        </el-form-item>
        <el-form-item
          label="任务编码"
          :label-width="formLabelWidth"
          prop="entrustTaskNum"
        >
          <el-input
            v-model="formData.entrustTaskNum"
            placeholder="任务编码"
            clearable
          />
        </el-form-item>
        <el-form-item label="计划检测时间" :label-width="formLabelWidth">
          <el-date-picker
            v-model="formData.planDetectionDate"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth" prop="remark">
          <el-input v-model="formData.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-row
          v-for="(item, index) in detectionItemData"
          :key="index"
          style="margin-bottom: 10px"
        >
          <el-card class="box-card">
            <div class="text item">
              <el-row>
                <el-col :span="8"
                  ><span style="float: left">
                    样品编号：{{ item.sampleNum }}</span
                  ></el-col
                >
                <el-col :span="8"
                  ><span style="float: left"
                    >样品名称：{{ item.sampleName }}</span
                  ></el-col
                >
                <el-col :span="8"
                  ><span style="float: left"
                    >规格容量：{{ item.sampleCount }}</span
                  ></el-col
                >
              </el-row>
              <el-row>
                <el-col :span="8"
                  ><span style="float: left"
                    >受检单位：{{ item.inspectedUnit }}</span
                  ></el-col
                >
              </el-row>
              <br />
              <el-row>
                <el-col :span="1">
                  <el-checkbox
                    v-model="checkAll[index]"
                    :indeterminate="isIndeterminate[index]"
                    @change="handleCheckAllChange(index)"
                    >全选</el-checkbox
                  ></el-col
                >
              </el-row>

              <el-col
                v-for="(items, indexs) in item.sysBusinessDetectionItems"
                :key="indexs"
                :span="8"
                style="float: left"
              >
                <el-checkbox
                  v-model="checkedItem[index][indexs]"
                  :label="items"
                  style="float: left"
                  @change="handleCheckedCitiesChange(index, items, indexs)"
                  >{{ items.detectionItemName }}</el-checkbox
                >
              </el-col>
            </div>
          </el-card>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button :disabled="!submitLoad" type="primary" @click="onSubmit()"
          >确 定</el-button
        >
        <el-button @click="closeDialog">取 消</el-button>
      </div>
    </el-dialog>
    <ChoiceUserDialog
      v-if="userDialogFormVisible"
      :dialog-form-visible.sync="userDialogFormVisible"
      :detection-people-id-list.sync="formData.detectionPeopleList"
      @choiceUser="choiceUser"
    />
  </div>
</template>

<script>
import { formatTime } from "../../utils/time";
import {
  TaskSampleDetectionItemByTaskId,
  entrustTaskUpdateDistribution,
  GetTaskNumber,
} from "../../api/EntrustTaskManage/EntrustTask";
import { getUserListNoPage } from "../../api/Permission/PermissionUser";
import ChoiceUserDialog from "../../../ModulePermission/components/Permission/ChoiceUserDialog.vue";
import _ from "lodash";

export default {
  name: "EntrustTaskAllocationDialog",
  components: {
    // ChoiceUserDialog,
    ChoiceUserDialog,
  },
  props: {
    dialogFormAllocationVisible: {
      type: Boolean, // 布尔
      default: false, // 必填
    },
    taskData: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      userDialogFormVisible: false,
      taskNum: "",
      submitLoad: true,
      choiceData: [],
      checkedItem: [],
      checkAll: [],
      isIndeterminate: [],
      detectionItemData: [],
      userArrary: [],
      loading: false,
      formLabelWidth: "150px",
      innerDialogFormVisible: false,
      formData: {
        detectionPeopleList: [],
        detectionPeopleLabelList: "",
        detectionPersonId: 0,
        planDetectionDate: formatTime(new Date()),
        remark: "",
        entrustTaskUpdateDistributionRequestData: [],
        entrustTaskNum: "",
        numChangeState: true,
      },
      formRules: {
        detectionPeopleLabelList: [
          { required: true, message: "检测人不能为空" },
        ],
        planDetectionDate: [
          { required: true, message: "计划检测时间不能为空" },
        ],
      },
    };
  },
  created() {
    this.innerDialogFormVisible = this.dialogFormAllocationVisible;
    this.getList();
  },
  methods: {
    // 选择人员的弹框关闭
    choiceUser(data) {
      if (data !== null && data.length !== 0) {
        this.formData.detectionPeopleLabelList = "";
        this.formData.detectionPeopleList = [];
        for (let i = 0; i < data.length; i++) {
          this.formData.detectionPeopleLabelList += data[i].name + ",";
          this.formData.detectionPeopleList.push(data[i].id);
        }
        this.formData.detectionPeopleLabelList =
          this.formData.detectionPeopleLabelList.substring(
            0,
            this.formData.detectionPeopleLabelList.length - 1
          );
      }
    },
    selectUser() {
      this.userDialogFormVisible = true;
    },
    // 确定
    onSubmit: _.throttle(function() {
      if (this.submitLoad) {
        this.submitLoad = false;
        if (
          this.formData.detectionPeopleLabelList === null ||
          this.formData.detectionPeopleLabelList.length === 0
        ) {
          this.$message("检测人必须填写");
          this.submitLoad = true;
          return false;
        }
        // if (this.formData.planDetectionDate === "") {
        //   this.$message("计划检测时间必须填写");
        //   this.submitLoad = false;
        //   return false;
        // }

        this.formData.NumChangeState =
          this.taskNum === this.formData.entrustTaskNum;
        for (let i = 0; i < this.choiceData.length; i++) {
          for (let o = 0; o < this.choiceData[i].length; o++) {
            if (this.choiceData[i][o] != null) {
              this.formData.entrustTaskUpdateDistributionRequestData.push({
                entrustOrderId: this.choiceData[i][o].entrustOrderId,
                entrustTaskId: this.choiceData[i][o].entrustTaskId,
                detectionItemId: this.choiceData[i][o].detectionItemId,
                sampleInfoIdArray: this.choiceData[i][o].sampleInfoIdArray,
              });
            }
          }
        }
        if (
          this.formData.entrustTaskUpdateDistributionRequestData.length === 0 ||
          this.formData.entrustTaskUpdateDistributionRequestData === null
        ) {
          this.$message("请选择数据");
          this.submitLoad = true;
          return false;
        }

        entrustTaskUpdateDistribution(this.formData).then((res) => {
          this.submitLoad = true;
          this.closeDialog();
        });
      }
    }, 2000),
    // 检测项目复选框点击事件
    // 三个参数第一个循环样品的下标,第二个选中的数据,第三个检测项目的下标
    handleCheckedCitiesChange(index, items, indexs) {
      if (this.checkedItem[index][indexs]) {
        this.choiceData[index][indexs] = items;
      } else {
        this.choiceData[index][indexs] = null;
      }

      var state = true;
      var falseCount = 0;
      for (let i = 0; i < this.checkedItem[index].length; i++) {
        if (!this.checkedItem[index][i]) {
          state = false;
          falseCount++;
        }
      }
      this.checkAll[index] = state;

      this.isIndeterminate[index] =
        falseCount > 0 && falseCount !== this.checkedItem[index].length;
    },
    // 全选事件
    handleCheckAllChange(index) {
      for (
        let i = 0;
        i < this.detectionItemData[index].sysBusinessDetectionItems.length;
        i++
      ) {
        if (this.checkAll[index]) {
          this.choiceData[index][i] =
            this.detectionItemData[index].sysBusinessDetectionItems[i];
        } else {
          this.choiceData[index][i] = null;
        }
        this.checkedItem[index][i] = this.checkAll[index];
      }
      this.isIndeterminate[index] = false;
    },
    getList() {
      this.userArrary = [];
      getUserListNoPage({})
        .then((res) => {
          this.userArrary = res.data;
        })
        .catch((res) => { });

      GetTaskNumber()
        .then((res) => {
          this.taskNum = res.data;
          this.formData.entrustTaskNum = res.data;
        })
        .catch(() => { });

      this.checkedItem = [];
      console.log(this.taskData)
      TaskSampleDetectionItemByTaskId(this.taskData).then((res) => {
        for (let i = 0; i < res.data.length; i++) {
          this.checkedItem.push([]);
          this.choiceData.push([]);
          for (
            let o = 0;
            o < res.data[i].sysBusinessDetectionItems.length;
            o++
          ) {
            this.choiceData[i].push(null);
            this.checkedItem[i].push(false);
          }

          this.checkAll.push();
          this.isIndeterminate.push();
        }

        this.detectionItemData = res.data;
      });
    },
    closeDialog() {
      this.innerDialogFormVisible = false;
      this.$emit("update:dialogFormAllocationVisible", false);
      this.$emit("getList");
    },
  },
};
</script>
<style scoped>
.selectProductStandard {
  width: 30px;
  color: white;
  font-size: 20px;
  height: 32px;
  text-align: center;
  border-radius: 5px;
  border: 1px silver;
  background-color: #4787ff;
  position: absolute;
  top: 0px;
  right: 0px;
}
</style>
